<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>贪吃蛇初级版</title>
	<style>
	*{margin: 0;padding: 0;}
		li{list-style:none;float:left;}
		#box{width:1300px;height: 600px;border:1px solid red;position: relative;}

		#box div{
			width:48px;height:48px;background: #09b;position: absolute;left:100px;top:100px;
			border:1px solid #aaa;
		}
		#box #snake-head{background: red;}
		#box span{display:block;width: 50px;height:50px;position: absolute;left:200px;top:200px;background: yellow;z-index: 1000;}
	</style>
</head>
<body>
	<div id="box">
		<div id="snake-head">
		
		</div>
		<div></div>
		<div></div>
		<span id="sw"></span>
	</div>
	<ul>
		<li>
		<p style="color:red;font-weight:bold;">设置完速度请按确定</p>
		速度：<!-- <input type="text" id="times" value="0"> -->
		<select name="" id="times">
			<option value="600" selected>慢</option>
			<option value="400">中</option>
			<option value="200">快</option>
		</select><button onclick="dis()">确定</button>&nbsp;&nbsp;&nbsp;<button onclick="sx()">从新开始</button></li>
	</ul>
<script>
	var timer;
	var times = document.getElementById('times');
	
var t = times.value;

//设置移动速度
	times.onchange = function(){
		
		t = times.value;
		//alert(times.value)
	}
	function dis(){
		times.disabled=true;
	}
	//从新开始
	function sx(){
		times.disabled=false;
		location.reload();
	}
	
	var box = document.getElementById('box');

	var snakeHead = document.getElementById('snake-head');

	var snake = box.getElementsByTagName('div');

	var food = document.getElementById('sw');

	var begint = document.getElementById('begin');
	
	

	//起始位置
	var start = [[100,0],[50,0],[0,0]];

	//步长
	var seep1 = 50;
	var seep2 = -50;

	//标记
	var markr = 0;

	var kg = false;

	startUp();
	
	var ctop;
	var cbottom;
	var cleft;
	var cright;

	//键盘按下时
	window.onkeyup = function(k){
		//alert(k.keyCode);
		var kVal = k.keyCode;
		keyCollide();
		food.innerHTML = '长度：'+snake.length;

		//top 38       bottom 40       left 37         right 39
		switch(kVal){
			
			//上
			case ctop:
			keypd()
			markr = 1;
			snakeHead.style.top = snakeHead.offsetTop+seep2+'px';
			updataPlace(1,seep2);
			die();
			direction(seep2,1);
			break;
			//下
			case cbottom:
			keypd()
			markr = 2;
			snakeHead.style.top = snakeHead.offsetTop+seep1+'px';
			updataPlace(1,seep1);
			die();
			direction(seep1,2);
			break;
			//左
			case cleft:
			keypd()
			markr = 3;
			snakeHead.style.left = snakeHead.offsetLeft+seep2+'px';
			updataPlace(2,seep2);
			die();
			direction(seep2,3);
			break;
			//右
			case cright:
			keypd();
			markr = 4;
			snakeHead.style.left = snakeHead.offsetLeft+seep1+'px';
			updataPlace(2,seep1);
			die();
			 direction(seep1,4);
			break;

		}	
		
	}
	//按键判断1
	function keypd(){
		if(kg){
			clearInterval(timer);
		}
		kg = true;
	}
	//初始化所有部位的位置
	function startUp(){
		for(var i=0;i<snake.length;i++){

		snake[i].style.left = start[i][0] + 'px';

		snake[i].style.top = start[i][1] + 'px';
		}
	}
	//头部移动时更新身体的位置信息
	function updataPlace(btnv,seep){
		var foodX = food.offsetLeft;
		var foodY = food.offsetTop;

		if(btnv==1){
			start.unshift([start[0][0],start[0][1]+seep]);
		}else{
			start.unshift([start[0][0]+seep,start[0][1]]);
		}
		if(start.length==snake.length+2){
			start.pop();
		}
		console.log(start);
		//alert(start);
		
		if(Math.abs(start[0][0] - foodX) <50 && Math.abs(start[0][1] - foodY) < 50){
			//加长长度
			var increase = document.createElement('div');
			box.appendChild(increase);
			food.style.display = 'none';
			foods();
		}
		startUp();
	}
	foods();
	//准备食物
	function foods(){
		
			var foodx = (Math.random()*20000)%box.offsetWidth;
			var foody = (Math.random()*20000)%box.offsetHeight;
			var fx = foodx - foodx % 50;
			var fy = foody - foody % 50;
			for(var i=0;i<start.length;i++){
				if(fx == start[i][0] && fy == start[i][1]){

				}
			}
			food.style.display = 'block';
			food.style.left = fx + 'px';
			food.style.top = fy + 'px';

				//alert(foodx+'.'+foody);
	}
	//自己移动
	function direction(s,m){
		var o;
		timer = setInterval(function (){
			markr = m;
			ss = s;
			mm = m;
			if(m == 1 || m == 2){
				
				snakeHead.style.top = snakeHead.offsetTop + s + 'px';
				o = 1;
			}else if(m == 3 || m == 4){
				
				snakeHead.style.left = snakeHead.offsetLeft + s + 'px';
				o = 2;
			}
			food.innerHTML = '长度：'+snake.length;
			updataPlace(o,s);
			die();
			console.log(snakeHead.style.left)
		},t)
		
	}
	
	//死亡判断
	function die(){
		//撞上边框死亡
		if(snakeHead.offsetLeft+snakeHead.offsetWidth>=box.offsetWidth || snakeHead.offsetLeft<0 || snakeHead.offsetTop<0 || snakeHead.offsetTop+snakeHead.offsetHeight>=box.offsetHeight){
			clearInterval(timer);
			window.onkeyup = null;
			alert('×_×你撞死了！从新开始。。');
		}
		//吃到自己身体死亡
		for(var i=1;i<snake.length;i++){
			
			if(Math.abs(snakeHead.offsetTop - start[i][1])<50 && Math.abs(snakeHead.offsetLeft - start[i][0])<50){
				clearInterval(timer);
				window.onkeyup = null;
				alert('×_×你把自己给咬死了！从新开始。。');
				times.disabled=false;
				location.reload();
			}
		}
	}
	//判断按键冲突
	function keyCollide(){
		if(markr == 1){
			ctop = 38;
			cbottom = null;
			cleft = 37;
			cright = 39;
		}else if(markr == 2){
			ctop = null;
			cbottom = 40;
			cleft = 37;
			cright = 39;
		}else if(markr == 3){
			ctop = 38;
			cbottom = 40;
			cleft = 37;
			cright = null;
		}else if(markr == 4){
			ctop = 38;
			cbottom = 40;
			cleft = null;
			cright = 39;
		}else{
			ctop = 38;
			cbottom = 40;
			cleft = 37;
			cright = 39;
		}
	}
	//随机位置
	 function rans(){
	 	return [(Math.random()*20000)%box.offsetWidth,(Math.random()*20000)%box.offsetHeight]
	 }
alert('按→键开始游戏');

	
</script>
</body>
</html>